<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式动态绑定</title>
    <script src="../js/common/vue/vue.js"></script>
    <style>
        .a {
            color: red;
        }

        .b {
            color: #26ff1c;
        }
    </style>
</head>
<body>
<div id="app">
    <!--a 类选择器的类名 ： red boolean值决定是否加载该样式 -->
    <h2 v-bind:class="{a:red,b:green}">样式动态绑定</h2>
    <h2 v-bind:class="getClasses()">样式动态绑定</h2>
    <button v-on:click="btn()">按钮</button>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            red: true,
            green: false,
        },
        methods: {
            getClasses() {
                return {a: this.red, b: this.green}
            },
            btn() {
                this.red = !this.red;
                this.green = !this.green;
            }
        }
    })
</script>
</body>
</html>